<template>
  <div class="dashboard-editor-container">
    <h1 style="font-size: 36px;text-align: center">网络文件存储管理平台</h1>
    <p style="text-align: center;color: #1ab394">欢迎使用网络文件存储管理平台</p>
    <div style="margin: 200px auto"></div>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="fileTypeData" chart-name="文件类型"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="fileTagData" chart-name="文件标签"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="fileSuffixData" chart-name="文件后缀"/>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PieChart from './dashboard/PieChart'
import {getFileSuffix, getFileTag, getFileType} from "@/api/manage/statistics";


export default {
  name: 'Index',
  components: {

    PieChart,

  },
  data() {
    return {
      fileTypeData: [],
      fileTagData: [],
      fileSuffixData: []
    }
  },
  created() {
    this.getFileTypaData()
    this.getFileTagData()
    this.getFileSuffixData()
  },
  methods: {
    getFileTypaData() {
      getFileType().then(res => {
        this.fileTypeData = res.data.datas
      })
    },
    getFileTagData() {
      getFileTag().then(res => {
        this.fileTagData = res.data.datas
      })
    },
    getFileSuffixData() {
      getFileSuffix().then(res => {
        this.fileSuffixData = res.data.datas
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
